<template>
  <div class="app-container">
    <div class="filter-tools">
      <el-form :inline="true" :model="filter" class="filter-form">
        <el-form-item label="状态">
          <el-select
            v-model="filter.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option v-for="(data,i) in status" :key="i" :label="data" :value="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开发组">
          <el-input
            v-model="filter.cate_name"
            placeholder="开发组名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="项目">
          <el-input
            v-model="filter.project_name"
            placeholder="项目名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="产品">
          <el-input
            v-model="filter.product_name"
            placeholder="产品名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="主模块">
          <el-input
            v-model="filter.f_module_name"
            placeholder="主模块名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="子模块">
          <el-input
            v-model="filter.s_module_name"
            placeholder="子模块名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="子模块ID">
          <el-input
            v-model="filter.s_module_id"
            placeholder="子模块ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="唯一标识">
          <el-input
            v-model="filter.test_report_uid"
            placeholder="测试单唯一标识"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="ID">
          <el-input
            v-model="filter.id"
            placeholder="ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">
            筛选
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table v-loading="dataLoading" :data="dataList" :height="height" border>
        <el-table-column label="ID" width="180">
          <template slot-scope="scope">
            <div><b>ID:</b>{{scope.row.id}}</div>
            <div class="goto" @click="goTestReports(scope.row)"><b>唯一标识:</b>{{scope.row.test_report_uid}}</div>
          </template>
        </el-table-column>
        <el-table-column label="测试模块" width="180">
          <template slot-scope="scope">
            <div><b>开发组:</b>{{scope.row.cate_name}}</div>
            <div><b>项目:</b>{{scope.row.project_name}}</div>
            <div><b>产品:</b>{{scope.row.product_name}}</div>
            <div><b>主模块:</b>{{scope.row.f_module_name}}</div>
            <div><b>子模块:</b>{{scope.row.s_module_name}}</div>
          </template>
        </el-table-column>
        <el-table-column label="数据" width="180">
          <template slot-scope="scope">
            <div  class="goto" @click="goTestApi(scope.row)"><b>测试接口数:</b>{{scope.row.test_api_sun}}</div>
            <div class="goto" @click="goTestParam(scope.row)"><b>测试用例数:</b>{{scope.row.test_param_sun}}</div>
            <div  class="goto" @click="goTestParam(scope.row)"><b>通过用例数:</b>{{scope.row.success_param_sun}}</div>
            <div  class="goto" @click="goTestParam(scope.row)"><b>总共执行验证器:</b>{{scope.row.test_validator_sum}}</div>
            <div class="goto" @click="goTestParam(scope.row)"><b>成功通过验证器:</b>{{scope.row.success_validator_sum}}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <div><el-tag :type="scope.row.status === 1 ? 'success' : 'info'">{{status[scope.row.status]}}</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column label="时间/人" min-width="200">
          <template slot-scope="scope">
            <div><b>测试时间:</b>{{scope.row.tested_at}}</div>
            <div><b>测试人:</b>{{scope.row.test_adminer || ''}}</div>
            <div><b>创建时间:</b>{{scope.row.created_at}}</div>
            <div><b>创建人:</b>{{scope.row.created_adminer || ''}}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="filter.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="filter.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filter.total"
        @size-change="handleSizeChange"
        @current-change="getList"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/runTest/testModuleApi' // API接口
export default {
  name: 'testModules',
  data() {
    return {
      height:this.$baseTableHeight(1),
      status:{},
      filter: {
        id:"",
        test_report_uid:"",
        page: 1,
        pageSize: 10,
        total: 0,
        created_adminer:"",
        updated_adminer:"",
        cate_name: '',
        project_name:"",
        product_name:"",
        f_module_name:"",
        s_module_name:"",
        s_module_id:"",
        status: "",
      },
      dataLoading: true,
      dataList: [],
      dialogStatus:false,
      formData:{},
      topStatus:0,
      inputVisible: false,
      inputValue: ''
    }
  },
  created() {
    this.filter.id = this.$route.query.test_module_id || null
    this.filter.test_report_uid = this.$route.query.test_report_uid || null
    this.filter.s_module_id = this.$route.query.s_module_id || null
    this.filter.f_module_name = this.$route.query.f_module_name || null
    this.filter.product_name = this.$route.query.product_name || null
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.filter.page = Number(page)
      api.list(this.filter).then((res) => {
        this.dataList = res.data.list
        this.status = res.data.status_maps
        this.filter.total = res.data.total
        this.dataLoading = false
      })
    },
    goHost(data) {
      this.$router.push({path:'/env/hostList',query:{host_env_id:data.id}});
    },
    handleSizeChange(val) {
      this.filter.pageSize = val
      this.getList(1)
    },
    goTestApi(data) {
      this.$router.push({path:'/runTest/testApis',query:{test_module_id:data.id}});
    },
    goTestParam(data) {
      this.$router.push({path:'/runTest/testParamRes',query:{test_module_id:data.id}});
    },
    goTestReports(data) {
      this.$router.push({path:'/runTest/testReports',query:{test_report_uid:data.test_report_uid}});
    },
  },

}
</script>

<style>
.avatar-uploader .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.goto:hover{color: #0051ff;}
.goto{
  cursor:pointer
}
</style>


